<template>
  <div class="main">
    <div class="title">
      <div class="blue"></div>
      <div class="name">水质量分布情况</div>
    </div>
    <div ref="radarChart" class="chart-container"></div>
    <div class="chart-footer">
      <div 
        v-for="(year, index) in years" 
        :key="index"
        class="year-item"
        @click="toggleYearSelection(year)"
      >
        <span :class="{ 'checked': isChecked(year) }" class="checkbox"></span>
        {{ year }}年
      </div>
    </div>
  </div>
</template>

<style scoped>
.chart-container {
  width: 100%;
  height: calc(100% - 50px); 
}

.chart-footer {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 8px 0;
  margin-top: 10px;
}

.year-item {
  display: flex;
  align-items: center;
  cursor: pointer; 
  color: #fff; 
  margin: 0 8px; 
  font-size: 14px; 
}

.checkbox {
  width: 16px; 
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.5); 
  border-radius: 4px; 
  margin-right: 6px; 
  transition: background 0.3s, border-color 0.3s; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}

.checked {
  background: #2997e4; 
  border-color: #2997e4; 
}

.year-item:nth-child(2) .checkbox.checked {
  background: #f9cf67; 
  border-color: #f9cf67; 
}

.year-item:nth-child(3) .checkbox.checked {
  background: #e92b77; 
  border-color: #e92b77; 
}

.checkbox::after {
  content: ''; 
  width: 0; 
  height: 0; 
  background: transparent; 
  border-radius: 2px; 
  opacity: 0; 
  transition: opacity 0.3s; 
}

.checked::after {
  opacity: 0; /* 勾选后保持透明 */
}

/* 移除未激活状态的单独颜色设置 */
.chart-footer button:nth-child(2),
.chart-footer button:nth-child(3) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}
</style>

<script>
import * as echarts from 'echarts/core';
import { RadarChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  RadarChart,
  CanvasRenderer
]);

export default {
  mounted() {
    this.initRadarChart();
  },
  methods: {
    generateYearOptions() {
      const current = new Date().getFullYear()
      return [current - 2, current - 1, current] // 直接返回升序数组
    },
    initRadarChart() {
      const chartDom = this.$refs.radarChart;
      const myChart = echarts.init(chartDom);
      
      // 五边形指标配置
      const indicator = [
        { text: '重庆市', max: 100 },
        { text: '北京市', max: 100 },
        { text: '上海市', max: 100 },
        { text: '广东省', max: 100 },
        { text: '浙江省', max: 100 }
      ];

      const option = {
        radar: {
          shape: 'polygon',
          indicator: indicator,
          splitNumber: 5,
          axisLine: {
            lineStyle: {
              color: 'rgba(41, 151, 228, 0.8)'
            }
          }
        },
        series: [{
          type: 'radar',
          data: [] // 删除原有数据，设置为空数组
        }]
      };

      myChart.setOption(option);
      window.addEventListener('resize', myChart.resize);
    },
    toggleYearSelection(year) {
      const index = this.checkedYears.indexOf(year);
      if (index > -1) {
        this.checkedYears.splice(index, 1); // 取消勾选
      } else {
        this.checkedYears.push(year); // 添加勾选
      }
      this.updateRadarChart(); // 更新雷达图
    },
    updateRadarChart() {
      const myChart = echarts.init(this.$refs.radarChart);
      const data = this.checkedYears.map(year => {
        const yearIndex = this.years.indexOf(year);
        const values = [
          Math.random() * 100, 
          Math.random() * 100, 
          Math.random() * 100, 
          Math.random() * 100, 
          Math.random() * 100
        ];
        
        return {
          value: values,
          name: `${year}年水质评分`,
          itemStyle: {
            color: this.activeColors[yearIndex]
          },
          areaStyle: {  // 新增区域样式
            color: this.activeColors[yearIndex],
            opacity: 0.2  // 添加透明度让颜色更柔和
          },
          label: {
            show: false // 关闭默认标签显示
          }
        };
      });

      const option = {
        tooltip: {
          trigger: 'item',
          show: true,
          formatter: (params) => {
            const values = params.value.map(v => `${v.toFixed(1)}分`).join('<br/>');
            return `
              ${params.seriesName}<br/>
              ${params.name}<br/>
              ${values}
            `;
          }
        },
        radar: {
          shape: 'polygon',
          indicator: [
            { text: '重庆市', max: 100 },
            { text: '北京市', max: 100 },
            { text: '上海市', max: 100 },
            { text: '广东省', max: 100 },
            { text: '浙江省', max: 100 }
          ],
          splitNumber: 5,
          axisLine: {
            lineStyle: {
              color: 'rgba(41, 151, 228, 0.8)'
            }
          }
        },
        series: [{
          type: 'radar',
          data: data,
          itemStyle: {
            color: this.activeColors
          },
          emphasis: { // 添加高亮状态下的标签显示
            label: {
              show: true,
              position: 'top',
              backgroundColor: 'rgba(0,0,0,0.7)',
              padding: [4, 6],
              borderRadius: 4,
              formatter: ({ value }) => value.toFixed(1)
            }
          }
        }]
      };
      myChart.setOption(option);
    },
    isChecked(year) {
      return this.checkedYears.includes(year); // 检查年份是否被勾选
    }
  },
  data() {
    return {
      activeColors: ['#2997e4', '#f9cf67', '#e92b77'], // 统一颜色配置
      selectedYear: new Date().getFullYear(),
       years: this.generateYearOptions(),
      checkedYears: [] // 新增用于存储勾选的年份
    }
  }
};
</script>

<style scoped>
.main {
  height: 40vh;
  width: 25%;
  background-color: #0d2b55;
  margin-top: 5px;
  margin-left: 10px;
}

.main .title {
  height: 11%;
  width: 100%;
  margin-top: 5px;
  margin-left: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.blue {
  background-color: #2997e4;
  width: 1%;
  height: 25px;
}

.name {
  flex: 1;
  font-size: 17px;
  color: white;
}

.chart-container {
  width: 100%;
  height: calc(100% - 120px); /* 增加底部空间 */
}

.year-selector {
  display: flex;
  justify-content: center;
  gap: 15px;
  padding: 10px 0;
  /* 移除绝对定位 */
  margin-top: 15px; /* 新增顶部间距 */
  width: 100%;
  background: rgba(41, 151, 228, 0.1); /* 添加背景色 */
  border-radius: 8px;
}

.year-selector button {
  background: rgba(41, 151, 228, 0.3);
  border: 1px solid #2997e4;
  color: #fff;
  padding: 6px 15px;
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.3s;
}

.year-selector button.active {
  background: #2997e4;
  box-shadow: 0 0 8px rgba(41, 151, 228, 0.8);
}

.year-selector button:hover {
  transform: scale(1.05);
}
</style>